<template>
	<!-- 1. 页面主容器 -->
	<view class="index-page-container" @touchstart="handleCloseOverlay">
		<!-- 2. 统一的吸顶容器 -->
		<view class="unified-sticky-container" :class="{ 'is-active': isHeaderSticky }">
			<!-- 2.1 吸顶后显示的搜索栏 -->
			<view class="header-container" :style="topBarStyle">
				<view class="location-selector" @click="onBack()">
					<u-icon name="arrow-left" bold color="#333" size="22"></u-icon>
				</view>
				<view class="middle-search"
					:style="{ backgroundColor: isHeaderSticky ? '#f3f2f2' : 'rgba(255, 255, 255, 0.3)' }">
					<view class="u-demo-block__content">
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<!-- #ifndef APP-NVUE -->
						<u-input placeholder="搜索本地热门话题" shape="circle" border="none" v-model="searchVal" color="#000"
							placeholder-style="color:#000" clearable confirmType="search" @confirm="loadPosts(true)">
						<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input placeholder="搜索本地热门话题" shape="circle" border="none" v-model="searchVal"
								color="#000" placeholder-style="color:#000" clearable confirmType="search"
								@confirm="loadPosts(true)">
							<!-- #endif -->
								<template slot="prefix">
									<view class="search-input-prefix">
										<view class="search-input-prefix-address" @click="navigateToCitySelect"
											:style="{ color: isHeaderSticky ? '#000' : '#EDEEEF' }">
											{{cityName}}
										</view>
										<view class="search-input-prefix-icon">
											<u-icon name="arrow-down-fill" :color="isHeaderSticky ? '#000' : '#EDEEEF'"
												size="15"></u-icon>
										</view>
										<view class="search-input-prefix-line"></view>
									</view>
								</template>
								<template slot="suffix">
									<view class="search-input-suffix" @click="loadPosts(true)">
										<u-icon name="search" :color="isHeaderSticky ? '#000' : '#EDEEEF'"
											size="27"></u-icon>
									</view>
								</template>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</view>
			</view>

			<!-- 2.2 吸顶后显示的快捷入口 (条件渲染) -->
			<view class="tabsListRow-sticky-links" v-if="isQuickLinksSticky">
				<view class="tabsListStyle">
					<view class="tabsListStyle-box" v-for="(item,index) in tabsList" :key="index"
						@click="handleClickTabs(index)">
						<view class="tabsListStyle-name" :class="{ selected: currentTabs == index }">
							{{item.name}}
						</view>
						<view class="tabsListStyle-line" v-show="index == currentTabs">
							<image src="/static/index/local-culture/tagsLine.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 3. 页面主要内容 (可滚动) -->
		<view class="scrollable-content">
			<!-- 3.1 顶部视频和初始搜索区域 -->
			<view class="top-content-wrapper">
				<view class="video-section">
					<view class="video-section-background">
						<image src="/static/index/local-culture/header.png" mode=""></image>
					</view>
					<!-- 装饰性元素 -->
					<view class="video-section-wind">
						<image src="/static/index/local-culture/wind.png" mode=""></image>
					</view>
					<view class="video-section-soil">
						<image src="/static/index/local-culture/soil.png" mode=""></image>
					</view>
					<view class="video-section-human-feelings">
						<image src="/static/index/local-culture/human-feelings.png" mode=""></image>
					</view>
					<view class="video-section-arrow-right">
						<image src="/static/index/local-culture/arrow-right.png" mode=""></image>
					</view>
					<view class="video-section-chitchat">
						<image src="/static/index/local-culture/chitchat.png" mode=""></image>
					</view>
				<!-- 	<view class="video-section-bendi">
						<image src="/static/index/local-culture/bendi.png" mode=""></image>
					</view> -->
					<view class="video-section-craftsmanship">
						<image src="/static/index/local-culture/craftsmanship.png" mode=""></image>
					</view>
				</view>

				<!-- 3.2 初始状态的搜索栏 -->
				<view class="header-container initial-header" :style="topBarStyle">
					<view class="location-selector" @click="onBack()">
						<u-icon name="arrow-left" bold color="rgba(237, 238, 239, 1)" size="22"></u-icon>
					</view>
					<view class="middle-search"
						:style="{ backgroundColor: isHeaderSticky ? '#f3f2f2' : 'rgba(255, 255, 255, 0.3)' }">
						<view class="u-demo-block__content">
							<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
							<!-- #ifndef APP-NVUE -->
							<u-input placeholder="搜索本地热门话题" shape="circle" border="none" v-model="searchVal"
								color="#EDEEEF" placeholder-style="color:#EDEEEF" clearable confirmType="search"
								@confirm="loadPosts(true)">
							<!-- #endif -->
								<!-- #ifdef APP-NVUE -->
								<u--input placeholder="搜索本地热门话题" shape="circle" border="none" v-model="searchVal"
									color="#EDEEEF" placeholder-style="color:#EDEEEF" clearable confirmType="search"
									@confirm="loadPosts(true)">
								<!-- #endif -->
									<template slot="prefix">
										<view class="search-input-prefix">
											<view class="search-input-prefix-address" @click="navigateToCitySelect"
												:style="{ color: isHeaderSticky ? '#000' : '#EDEEEF' }">
												{{cityName}}
											</view>
											<view class="search-input-prefix-icon">
												<u-icon name="arrow-down-fill"
													:color="isHeaderSticky ? '#000' : '#EDEEEF'" size="15"></u-icon>
											</view>
											<view class="search-input-prefix-line"></view>
										</view>
									</template>
									<template slot="suffix">
										<view class="search-input-suffix" @click="loadPosts(true)">
											<u-icon name="search" :color="isHeaderSticky ? '#000' : '#EDEEEF'"
												size="27"></u-icon>
										</view>
									</template>
							<!-- #ifndef APP-NVUE -->
							</u-input>
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							</u--input>
							<!-- #endif -->
						</view>
					</view>
				</view>
			</view>

			<!-- 3.3 初始状态的快捷入口 (吸顶触发点) -->
			<view class="quick-links-container" id="initial-quick-links">
				<view v-for="(item, index) in tabsList" :key="index" class="quick-link-item"
					@click="handleClickTabs(index)">
					<view class="tabsListUnder" :class="{ selected: currentTabs == index }">
						<view class="tabsListUnder-box">
							<view class="tabsListUnder-imgBox">
								<image :src="item.imgUrl" mode="aspectFill"></image>
							</view>
							<view class="tabsListUnder-name">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 	3.4 夏日出行计划 Swiper
				<view class="summer-plan-swiper">
					<u-swiper :list="summerPlanImages" height="160" imgMode="scaleToFill" radius="10" :autoplay="true"
						circular :indicator="true" indicatorMode="dot" @click="navigateToBanner"
						indicatorActiveColor="#ffaa0c"></u-swiper>
				</view> -->

			<!-- 3.5 瀑布流内容区 -->
			<view class="waterfall-section" @touchstart="handleContentTouchStart" @touchend="handleContentTouchEnd"
				@touchmove="handleContentTouchMove">
				<WaterfallPosts :left-list="leftList" :right-list="rightList"
					:active-long-press-post-id="activeLongPressPostId" @itemClick="navigateToPostDetail"
					@closeOverlay="handleCloseOverlay" @longPress="handleLongPress" @touchEnd="handleTouchEnd"
					@like="handleLikePost" />
				<u-loadmore :status="waterfallLoadStatus" />
			</view>
		</view>
		<richPostDetail :show="showRichPostDetail" @close="showRichPostDetail = false" :postData="currentDetail" />
	</view>
</template>

<script>
	import WaterfallPosts from '@/components/index/waterfall-posts/waterfall-posts.vue';
	import richPostDetail from '@/components/richPostDetail/richPostDetail.vue';
	import {
		mapState
	} from 'vuex';
	import {
		getPosts,
		postCancelLike,
		postClientLike
	} from '@/request/api.js';
	import config from '@/config/index.js';
	export default {
		components: {
			WaterfallPosts,
			richPostDetail
		},
		// #ifdef APP-PLUS
		onBackPress(event) {
			if (plus.os.name === "Android") {
				// 获取弹窗状态 isPopup 1:打开
				const isPopup = uni.getStorageSync("isPopup");
				if (isPopup === "1") {
					// 关闭弹窗
					this.$refs.customPopup.close();
					// 阻止页面返回
					return true;
				}
			}
		},
		// #endif
		data() {
			return {
				showRichPostDetail: false,
				currentDetail: {},
				lineBg: require('@/static/index/local-culture/tagsLine.png'),
				screenWidth: 0, //设备宽度
				currentModalVideoSrc: config.cdnURL + '/home_page/header.mp4',
				isVideoPlaying: true,
				videoSrc: config.cdnURL + '/home_page/header.mp4',
				tabsList: [{
						name: '民风民俗',
						badge: {
							isDot: true
						},
						imgUrl: require('@/static/index/local-culture/first.png'),
					},
					{
						name: '历史名人',
						imgUrl: require('@/static/index/local-culture/third.png'),
					},
					{
						name: '方言俚语',
						imgUrl: require('@/static/index/local-culture/second.png'),
					},
					{
						name: '非遗文化',
						imgUrl: require('@/static/index/local-culture/fourth.png'),
					},
				],

				summerPlanImages: [
					'/static/index/local/banner3.png',
					// '/static/index/local/banner2.jpg',
					'/static/index/local/banner.png',
					'http://www.hacn86.cn/home_page/2025/07/29/1753749969966_20250729084609A005.png',
				],
				currentTabs: 0, //当前选中的tabs标签
				isHeaderSticky: false,
				isQuickLinksSticky: false,
				stickyTriggerTop: 0,
				quickLinksStickyTriggerTop: 0,
				stickyHeaderHeight: 0,
				activeLongPressPostId: null,
				leftList: [],
				rightList: [],
				waterfallPage: 1,
				waterfallPageSize: 8,
				isWaterfallLoading: false,
				waterfallLoadStatus: 'loadmore',
				searchVal: '', //输入框内容
				contentTouchStartX: 0,
				contentTouchEndX: 0,
				contentTouchStartTime: 0,
				contentTouchEndTime: 0,
				isContentSwiping: false,
				queryParams: {
					category: 7
				}
			};
		},
		computed: {
			...mapState('im', ['totalUnreadCount']),

			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo
						.capsuleRightPadding * 2;
					const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo
						.capsuleRightPadding;


					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return '';
			},
			cityName() {
				return this.$store.state.cityInfo.name
			},

		},
		onReady() {
			this.$nextTick(() => {
				this.getLayoutPositions();
				this.screenWidth = uni.getSystemInfoSync().screenWidth

			});
		},
		onPageScroll(e) {
			const scrollTop = e.scrollTop;
			const shouldBeSticky = scrollTop > 10;
			if (this.isHeaderSticky !== shouldBeSticky) {
				this.isHeaderSticky = shouldBeSticky;
			}

			if (this.quickLinksStickyTriggerTop > 0) {
				const shouldLinksBeSticky = scrollTop >= this.quickLinksStickyTriggerTop;
				if (this.isQuickLinksSticky !== shouldLinksBeSticky) {
					this.isQuickLinksSticky = shouldLinksBeSticky;
				}
			}

		},
		onLoad() {
			this.loadPosts(true);
		},
		onReachBottom() {
			this.loadPosts(false);
		},


		onPullDownRefresh() {
			//如果打开的是详情弹框，下拉刷新不掉接口
			if (this.showRichPostDetail) {

			} else {
				this.loadPosts(true);
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		onBackPress(options) {
			// 优先关闭发布弹窗
			if (options.from === 'backbutton' && this.showPublishPopup) {
				this.showPublishPopup = false;
				return true;
			}

			// 优先关闭详情弹框
			if (options.from === 'backbutton' && this.showRichPostDetail) {
				// 需要触发组件的关闭
				this.showRichPostDetail = false
				return true;
			}

			return false;
		},
		methods: {
			navigateToCitySelect() {
				uni.navigateTo({
					url: '/pages_sub/common/city/city-select'
				});
			},
			handleLikePost(item) {
				const isLiked = item.isLiked;
				const api = isLiked ? postCancelLike : postClientLike;

				// UI即时反馈
				item.isLiked = !isLiked;
				item.likeCount += isLiked ? -1 : 1;

				api({
					postId: item.id,
					userId: this.$store.state.userInfo.userId
				}).catch(() => {
					// 失败时回滚
					item.isLiked = isLiked;
					item.likeCount += isLiked ? 1 : -1;
				});
			},
			onBack() {
				uni.navigateBack();
			},
			getLayoutPositions() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.unified-sticky-container').boundingClientRect(data => {
					if (data) this.stickyHeaderHeight = data.height;
				}).exec();
				query.select('#initial-quick-links').boundingClientRect(data => {
					if (data) {
						console.log(data.top, '123===================');
						// 快捷入口的吸顶触发点 = 元素初始top值 - 吸顶搜索栏高度 
						this.quickLinksStickyTriggerTop = data.top - this.stickyHeaderHeight + 60;
						console.log(this.quickLinksStickyTriggerTop, 'this.quickLinksStickyTriggerTop');
					}
				}).exec();
			},
			async loadPosts(isRefresh = false) {
				if (this.isWaterfallLoading || (!isRefresh && this.waterfallLoadStatus === 'nomore')) return;
				this.isWaterfallLoading = true;
				this.waterfallLoadStatus = 'loading';
				if (isRefresh) {
					this.waterfallPage = 1;
					this.leftList = [];
					this.rightList = [];
				}
				const params = {
					userId: this.$store.state.userInfo.userId,
					queryType: 1,
					categoryId: this.queryParams.category,
					pageNum: this.waterfallPage,
					pageSize: this.waterfallPageSize,
					cityName: this.cityName,
					content: this.searchVal
				};
				console.log('即将发送 getPosts 请求，参数为:', params);
				try {
					const res = await getPosts(params);
					if (res.data && res.data.code === 200) {
						const formattedPosts = (res.data.rows || []).map(this.formatApiData);
						this.distributePostsToColumns(formattedPosts);
						const hasMore = formattedPosts.length === this.waterfallPageSize;
						this.waterfallLoadStatus = hasMore ? 'loadmore' : 'nomore';
						if (hasMore) this.waterfallPage++;
					} else {
						this.waterfallLoadStatus = 'loadmore';
					}
				} catch (error) {
					this.waterfallLoadStatus = 'loadmore';
				} finally {
					this.isWaterfallLoading = false;
				}
			},
			distributePostsToColumns(newPosts) {
				newPosts.forEach(post => {
					if (this.leftList.length <= this.rightList.length) this.leftList.push(post);
					else this.rightList.push(post);
				});
			},
			formatApiData(item) {
				const coverImage = (item.files && item.files.length > 0 && item.files[0].fileUrl) ? (item.files[0].fileUrl
					.startsWith('http') ? item.files[0].fileUrl : config.cdnURL + item.files[0].fileUrl) : '';
				const authorAvatar = item.avatar ? (item.avatar.startsWith('http') ? item.avatar : config.cdnURL + item
					.avatar) : '/static/demo/avatar_default.png';
				return {
					id: item.id,
					image: coverImage,
					content: item.content,
					author: {
						avatar: authorAvatar,
						name: item.nickName || '匿名用户',
					},
					isLiked: item.isLiked,
					likeCount: item.likeCount,
					...item
				};
			},


			handleLongPress(postId) {
				this.activeLongPressPostId = postId;
			},
			handleCloseOverlay() {
				if (this.activeLongPressPostId !== null) {
					setTimeout(() => {
						this.activeLongPressPostId = null;
					}, 100);
				}
			},
			handleTouchEnd() {},



			navigateToBanner(item) {
				uni.navigateTo({
					url: `/pages_sub/common/general-activity/general-activity`,
					success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
						item: item
					})
				});
			},
			navigateToPostDetail(item) {
				// uni.navigateTo({
				// 	url: `/pages_sub/index/rich-post-detail/rich-post-detail`,
				// 	success: (res) => res.eventChannel.emit('acceptDataFromOpenerPage', {
				// 		item: item
				// 	})
				// });
				this.currentDetail = item
				this.showRichPostDetail = true
			},
			handleContentTouchStart(event) {
				this.contentTouchStartX = event.touches[0].clientX;
				this.contentTouchStartTime = new Date().getTime();
				this.isContentSwiping = false;
			},

			// content区域触摸移动事件
			handleContentTouchMove(event) {
				// 可以在这里添加滑动过程中的效果
			},

			// content区域触摸结束事件
			handleContentTouchEnd(event) {
				this.contentTouchEndX = event.changedTouches[0].clientX;
				this.contentTouchEndTime = new Date().getTime();
				this.handleContentSwipeGesture();
			},

			// 处理content区域的滑动手势
			handleContentSwipeGesture() {
				const swipeDistance = this.contentTouchEndX - this.contentTouchStartX;
				const swipeTime = this.contentTouchEndTime - this.contentTouchStartTime;
				const swipeThreshold = 50; // 滑动阈值

				// 检查滑动距离是否超过阈值 且 滑动时间不太长（避免误判为滚动）
				if (Math.abs(swipeDistance) > swipeThreshold && swipeTime < 300) {
					// 防止重复触发
					if (this.isContentSwiping) return;
					this.isContentSwiping = true;

					if (swipeDistance > 0) {
						// 右滑 - 切换到上一个tab
						this.switchToPreviousTab();
					} else {
						// 左滑 - 切换到下一个tab
						this.switchToNextTab();
					}

					// 重置滑动状态
					setTimeout(() => {
						this.isContentSwiping = false;
					}, 300);
				}
			},

			// 切换到上一个tab
			switchToPreviousTab() {
				if (this.currentTabs > 0) {
					this.currentTabs--;
					this.handleTabChange(this.currentTabs);
				}
			},

			// 切换到下一个tab
			switchToNextTab() {
				if (this.currentTabs < this.tabsList.length - 1) {
					this.currentTabs++;
					this.handleTabChange(this.currentTabs);
				}
			},
			// 处理tab切换后的逻辑
			handleTabChange(index) {
				// 根据当前选中的tab执行相应的操作
				const selectedTab = this.tabsList[index];
				// 根据tab索引设置对应的category值
				switch (index) {
					case 0: // 民风民俗
						this.queryParams.category = 7;
						break;
					case 1: // 历史名人
						this.queryParams.category = 8;
						break;
					case 2: // 方言俚语
						this.queryParams.category = 9;
						break;
					case 3: // 非遗文化
						this.queryParams.category = 10;
						break;
					default:
						this.queryParams.category = 7;
				}
				this.loadPosts(true);
			},
			// 点击tabs
			handleClickTabs(index) {
				this.currentTabs = index
				switch (index) {
					case 0: // 民风民俗
						this.queryParams.category = 7;
						break;
					case 1: // 历史名人
						this.queryParams.category = 8;
						break;
					case 2: // 方言俚语
						this.queryParams.category = 9;
						break;
					case 3: // 非遗文化
						this.queryParams.category = 10;
						break;
					default:
						this.queryParams.category = 7;
				}
				this.loadPosts(true);
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 1. 基础变量定义
	$primary-color: #F6CA4D;
	$text-dark: #333;
	$text-light: #EDEEEF;
	$background-dark: rgba(64, 21, 5, 1);
	$sticky-header-bg: #ffffff;

	// 2. 页面容器层级
	.index-page-container {
		// background-color: $background-dark;
	}

	// 3. 固定头部容器层级
	.unified-sticky-container {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background-color: $sticky-header-bg;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

		&.is-active {
			visibility: visible;
			opacity: 1;
			padding-top: 20rpx;
		}
	}

	// 4. 搜索栏样式
	.middle-search {
		box-sizing: border-box;
		height: 62rpx;
		border-radius: 20.5rpx;
		margin-left: 16rpx;
		width: calc(100vw - 76rpx);
		background-color: rgba(255, 255, 255, 0.3);

		.search-input-prefix {
			display: flex;
			height: 40rpx;
			line-height: 40rpx;
			margin: 11rpx 16rpx;
			color: $text-light;

			.search-input-prefix-address {
				font-size: 30rpx;
				font-weight: 400;
			}

			.search-input-prefix-icon {
				margin: 7rpx 10rpx;
			}

			.search-input-prefix-line {
				width: 0px;
				height: 30rpx;
				border: 3rpx solid $primary-color;
				margin: 5rpx 0;
			}
		}

		.search-input-suffix {
			margin-right: 24rpx;
		}
	}

	// 吸顶状态下的搜索栏
	.is-active .middle-search {
		background-color: #f3f2f2;
	}

	.header-container {
		display: flex;
		align-items: center;
		/* #ifdef APP || H5  */
		padding: 10rpx 30rpx;
		/* #endif */
		box-sizing: border-box;

		.location-selector {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
			margin-right: 20rpx;
			color: $text-dark;
		}
	}

	// 5. 内容区域层级
	.scrollable-content {
		// 主内容区域
		border-radius: 20rpx;
	}

	.top-content-wrapper {
		position: relative;
		width: 100vw;
		max-width: 100vw;
		overflow-x: hidden;

		.video-section {
			width: 100%;
			height: 678rpx;
			position: relative;
			overflow: hidden;

			.video-section-background {
				width: 100%;
				height: 678rpx;

				image {
					width: 100%;
					height: 678rpx;
				}
			}

			// 所有装饰性元素统一管理
			@mixin decorative-element($top, $left, $z-index: 5) {
				position: absolute;
				top: $top;
				left: $left;
				width: 100%;
				height: auto;
				z-index: $z-index;

				image {
					display: block;
				}
			}

			.video-section-wind {
				@include decorative-element(208rpx, 94rpx);

				image {
					width: 158rpx;
					height: 148rpx;
				}
			}

			.video-section-soil {
				@include decorative-element(168rpx, 246rpx);

				image {
					width: 134rpx;
					height: 122rpx;
				}
			}

			.video-section-human-feelings {
				@include decorative-element(168rpx, 350rpx);

				image {
					width: 254rpx;
					height: 190rpx;
				}
			}

			.video-section-arrow-right {
				@include decorative-element(298rpx, 163rpx);

				image {
					width: 143rpx;
					height: 113rpx;
				}
			}

			.video-section-chitchat {
				@include decorative-element(320rpx, 144rpx);

				image {
					width: 194rpx;
					height: 73rpx;
				}
			}

			.video-section-bendi {
				@include decorative-element(29rpx, 350rpx);

				image {
					width: 168rpx;
					height: 71rpx;
				}
			}

			.video-section-craftsmanship {
				@include decorative-element(338rpx, 282rpx);

				image {
					width: 340rpx;
					height: 92rpx;
				}
			}
		}

		.header-container.initial-header {
			position: absolute; // 改为 absolute 定位
			top: 20rpx;
			left: 0;
			right: 0;
			z-index: 10;
			width: 100vw;
			max-width: 100vw;

			.location-selector {
				color: #fff;
				align-items: center;
			}

			.search-bar {
				background-color: rgba(255, 255, 255, 0.2);
				border: 1rpx solid rgba(255, 255, 255, 0.2);
			}

			.search-placeholder {
				color: rgba(255, 255, 255, 0.9);
			}
		}
	}

	.top-content-placeholder {
		height: 548rpx; // 与 video-section 高度一致
		width: 100%;
	}

	// 6. Tabs导航层级
	.tabsListRow-sticky-links {
		margin: 0 30rpx 10rpx;

		.tabsListStyle {
			box-sizing: border-box;
			display: flex;
			width: 100%;
			height: 60rpx;

			.tabsListStyle-box {
				flex: 1;
				text-align: center;
				padding: 10rpx 0;
				cursor: pointer;

				.tabsListStyle-name {
					height: 40rpx;
					line-height: 40rpx;
					font-size: 27rpx;
					font-weight: 500;

					&.selected {
						font-weight: 800;
					}
				}

				.tabsListStyle-line {
					height: 40rpx;
					position: relative;
					top: -30rpx;
					z-index: -1;

					image {
						width: 114rpx;
						height: 20rpx;
					}
				}
			}
		}
	}

	// 7. 快捷链接区域
	.quick-links-container {
		display: flex;
		flex-wrap: nowrap;
		padding: 0 30rpx 40rpx;
		gap: 10rpx;
		height: 200rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		margin-top: -260rpx;

		.quick-link-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: calc(25% - 7.5rpx);
			transition: all 0.3s ease;
			justify-content: flex-end;
		}

		.tabsListUnder {
			width: 140rpx;
			height: 140rpx;
			display: flex;
			border-radius: 20rpx;
			position: relative;
			align-items: center;
			justify-content: center;
			background-color: rgba(217, 217, 217, 1);
			transition: all 0.3s ease;
			background: linear-gradient(to bottom,
					rgba(255, 223, 5, 1) 0%,
					rgba(246, 202, 77, 1) 50%,
					rgba(200, 200, 200, 1) 70%,
					rgba(217, 217, 217, 1) 100%);

			.tabsListUnder-box {
				width: 140rpx;
				height: 140rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.tabsListUnder-imgBox {
					width: 140rpx;
					height: 126rpx;
					display: flex;
					justify-content: center;
					border-top-right-radius: 10rpx;
					border-top-left-radius: 10rpx;

					image {
						border-top-right-radius: 20rpx;
						border-top-left-radius: 20rpx;
						width: 140rpx;
						height: 100rpx;
					}
				}

				.tabsListUnder-name {
					padding: 2rpx 22rpx;
					width: 120rpx;
					height: 40rpx;
					font-size: 24rpx;
					font-weight: 500;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			&.selected {
				width: 180rpx;
				height: 196rpx;
				font-weight: bold;
				z-index: 2;
				position: relative;
				background: linear-gradient(to bottom,
						rgba(255, 223, 5, 1) 0%,
						rgba(246, 202, 77, 1) 50%,
						rgba(255, 242, 232, 1) 100%);

				&::after {
					content: '';
					position: absolute;
					bottom: -12rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 0;
					height: 0;
					border-left: 20rpx solid transparent;
					border-right: 20rpx solid transparent;
					border-top: 12rpx solid rgba(255, 242, 232, 1);
					z-index: 3;
				}

				.tabsListUnder-box {
					width: 180rpx;
					height: 180rpx;

					.tabsListUnder-imgBox {
						width: 180rpx;
						height: 160rpx;

						image {
							width: 164rpx;
							height: 126rpx;
							border-radius: 20rpx;
						}
					}

					.tabsListUnder-name {
						width: 160rpx;
						height: 40rpx;
						padding: 6rpx 30rpx 4rpx;
						font-size: 30rpx;
						font-weight: 700;
					}
				}
			}
		}
	}

	// 8. 轮播图区域
	.summer-plan-swiper {
		padding: 18rpx 32rpx 30rpx;
		background-color: $background-dark;
	}

	// 9. 瀑布流区域
	.waterfall-section {
		padding: 0 10rpx;
		padding-bottom: 130rpx;
	}
</style>